<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">


<style type="text/css">
#mask {
	position: absolute;
	z-index: 0;
	background-color: #000;
	display: none;
	left: 0;
	top: 0;
}

section.window {
	display: none;
	position: absolute;
	left: 27%;
	top: 22%;
	z-index: 1;
}

.login {
	margin: 30px auto;
}

tr {
	border: 1px solid #ccc;
}
</style>
<link href="assets/css/naver_ux.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="assets/js/jindo.desktop.all.js"></script>
<script type="text/javascript" src="assets/js/jindo_component.js"></script>
<script type="text/javascript" src="assets/js/jindo_mobile_component.js"></script>
<script type="text/javascript" src="assets/js/user_state.js"></script>
<title>네이버 UX::반응형 웹</title>
</head>
<body id="mainbody">

	<header class="main_header">
		<h1>
			<img alt="네이버 UX::반응형 웹" src="assets\resource\img\logo.png">
		</h1>
		<form class="form-search">
			<div class="input-append">
				<input type="text" class="span2 search-query">
				<button type="submit" class="btn">Search</button>
			</div>
		</form>

		<nav class="main_navi">
			<h5>[main_navi]</h5>
			<ul>
				<li>category01</li>
				<li>category02</li>
				<li>category03</li>
				<li>category04</li>
			</ul>
		</nav>
	</header>

	<section class="main_container">
		<section id="mflick">
			<header> 1234</header>
			<section class="flick-container">
				<article class="flick-ct"></article>
				<div class="flick-ct"></div>
				<div class="flick-ct">
					<p>Layer 3</p>
				</div>
				<div class="flick-ct">
					<p>Layer 1</p>
				</div>
				<div class="flick-ct">
					<p>Layer 2</p>
				</div>
				<div class="flick-ct">
					<p>Layer 3</p>
				</div>
			</section>
			<footer> </footer>
		</section>

		<section class="sub_container">
			<ul>
				<li>
					<Section id="user_off">
						<input type="text" id="userid" placeholder="아이디"> <input
							type="password" id="userpw" placeholder="비밀번호">
						<button id="member">회원가입</button>
						<button id="btnLogin">로그인</button>
					</Section>
					<Section id="user_on">
						<h3></h3>
						<button id="btnLogout">로그아웃</button>
					</Section>
					<section class="issue_info">
						<h1>[issue_info]</h1>
						<div id="issue_data"></div>

					</section>
					<section id="weather_info">
						<h1>[weather_info]</h1>
						<div id="weather_data"></div>
					</section>
				</li>
			</ul>
		</section>
	</section>

	<Section id="mask"></Section>
	<Section class="window"
		style="width: 600px; height: 340px; background-color: white;">
		<header>
			<h1>
				<font face="verdana">회원가입</font>
			</h1>
		</header>
		<hr>
		<Section
			style="width: 500px; height: 300px; margin: 40px auto; padding-left: 3%;">
			<table
				style="border: 1px solid #ccc; border-top-style: groove; border-bottom-style: groove; order-left-style: none; border-right-style: none;"
				cellspacing="0">
				<tr>
					<td style="background-color: #EAEAEA; width: 30%;">이름</td>
					<td style="padding-left: 20px;"><input type="text"
						id="membername"></td>
				</tr>
				<tr>
					<td style="background-color: #EAEAEA;">아이디</td>
					<td style="padding-left: 20px;"><input type="text"
						id="memberid">&nbsp;
						<button>중복체크</button>
						<p>
							<font size="2pt">입력하신 아이디로 네이버 이메일 주소가 생성됩니다.</font>
						</p></td>
				</tr>
				<tr>
					<td style="background-color: #EAEAEA;">패스워드</td>
					<td style="padding-left: 20px;"><input type="password"
						id="memberpw"></td>
				</tr>
				<tr>
					<td style="background-color: #EAEAEA;">패스워드확인</td>
					<td style="padding-left: 20px;"><input type="password"
						id="userpwcheck"></td>
				</tr>
				<tr>
					<td style="background-color: #EAEAEA;">이메일</td>
					<td style="padding-left: 20px;"><input type="text" id="email"></td>
				</tr>
				<tr>
					<td style="background-color: #EAEAEA;">사용자 연락처</td>
					<td style="padding-left: 20px;"><input type="tel" id="tel"></td>
				</tr>
			</table>
			<button id="submit">확인</button>
		</Section>
	</Section>



	<script src="http://code.jquery.com/jquery-latest.js"></script>

	<script type="text/javascript">
		jindo.$Element("btnLogin").attach("click", loginProcess);
		jindo.$Element("btnLogout").attach("click", logoutProcess);
		//jindo.$Element(document).attach("load",parsingData);
		jindo.$Element(document).attach("domready", checksession);
	</script>


	<script type="text/javascript">
		function wrapWindowByMask() {
			//화면의 높이와 너비를 구한다.
			var maskHeight = $(document).height();
			var maskWidth = $(document).width();
			//마스크의 높이와 너비를 화면 것으로 만들어 전체 화면을 채운다.
			$('#mask').css({
				'width' : maskWidth,
				'height' : maskHeight
			});
			//애니메이션 효과 - 일단 1초동안 까맣게 됐다가 80% 불투명도로 간다.
			$('#mask').fadeIn(100);
			$('#mask').fadeTo("fast", 0.8);
			//윈도우 같은 거 띄운다.
			$('.window').show();
		}

		$(document).ready(function() {
			//검은 막 띄우기
			$('#member').click(function(e) {
				wrapWindowByMask();
			});
			//검은 막을 눌렀을 때(부모창)
			$('#mask').click(function() {
				e.preventDefault();
			});

			$('#button').click(function() {
				$("#mask").hide();
				$('.window').hide();
			});

			$('#submit').click(function() {
				registerProcess();
				$("#mask").hide();
				$('.window').hide();
			});
		});

		var weatherAjax = new $Ajax('weather.json', {
			type : 'xhr',
			method : 'get', // GET 방식으로 통신
			onload : getWeather,
			timeout : 3, // 3초 이내에 요청이 완료되지 않으면 ontimeout 실행 (생략 시 0)
			ontimeout : function() { // 타임 아웃이 발생하면 실행될 콜백 함수, 생략 시 타임 아웃이 되면 아무 처리도
				alert("Timeout!");
			},
			async : true
		});
		weatherAjax.request();
		function getWeather(response) {
			var res = response.text();
			var data = eval("(" + res + ")");
			var result = data.dailyList;
			var spread = "";
			for ( var i = 0; i < result.length; i++) {
				spread += "<li><a href="+result[i].url+">" + result[i].location
						+ " " + result[i].rain + " " + result[i].state + " "
						+ result[i].temper + "</a></li>";
			}
			jindo.$Element("weather_data").html(spread);
		}

		var realtimeAjax = new $Ajax('realtime.json', {
			type : 'xhr',
			method : 'get', // GET 방식으로 통신
			onload : getRealtime,
			timeout : 3, // 3초 이내에 요청이 완료되지 않으면 ontimeout 실행 (생략 시 0)
			ontimeout : function() { // 타임 아웃이 발생하면 실행될 콜백 함수, 생략 시 타임 아웃이 되면 아무 처리도
				alert("Timeout!");
			},
			async : true
		// 비동기로 호출하는 경우, 생략하면 true
		});
		realtimeAjax.request();
		function getRealtime(response) {
			var res = response.text();
			var data = eval("(" + res + ")");
			var result = data.d;
			var spread = "";
			for ( var i = 0; i < result.length; i++) {
				spread += "<li>" + result[i].k + "   " + result[i].a + " "
						+ result[i].n + "</li>";
			}
			jindo.$Element("issue_data").html(spread);
		}
	</script>
</body>
</html>